<template>
<d2-container>
  <el-card class="carousel" shadow="never">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="addHandler">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="tableLoading" :data="tableData" stripe>
      <el-table-column type="index" label="编号" width="50" />
      <el-table-column label="活动名称" width="150">
        <template slot-scope="{ row }">
          <div> {{ getBackName(row) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="uid" label="UID" />
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state === '1'" type="warning">封禁</el-tag>
          <el-tag v-else>正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="dateline" label="活动时间" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-popconfirm
            :title="`您确定${(scope.row.state === '1' ? '解封' : '冻结')}？`"
            @onConfirm="toggleHandler(scope.row)"
          >
            <el-button slot="reference" type="text" size="small">{{ scope.row.state === '1' ? '解封' : '冻结' }}</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :total="pagination.total" :page-size="pagination.pageSize" @current-change="changeHandler" />
    <!-- 新增选择 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="500px">
      <el-form ref="form" :model="form" label-width="110px">
        <el-form-item label="添加方式：">
          <el-radio-group v-model="form.resource">
            <el-radio label="1">手动添加</el-radio>
            <el-radio label="2">二维码添加</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="surebtn">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible" label-width="120px" width="600px">
      <el-form ref="form" :model="formData" :rules="rules" label-width="120px" width="50%">
        <el-form-item label="添加方式：">
          <div style="display: flex;align-items: center;justify-content: flex-start;">
            <el-select v-model="types" filterable @change="chagese">
              <el-option label="UID" :value="0" />
              <el-option label="电话号码" :value="1" />
              <el-option label="昵称" :value="2" />
            </el-select>
            <div style="width:150px;margin:0px 10px" v-if="types == 0">
              <el-input type="number" :min="0" v-model="fromlist.uid" placeholder="请输入UID" />
            </div>
            <div style="width:150px;margin:0px 10px" v-if="types == 1">
              <el-input type="number" :min="0" v-model="fromlist.phone" placeholder="请输入电话号码" />
            </div>
            <div style="width:150px;margin:0px 10px" v-if="types == 2">
              <el-input v-model="fromlist.username" placeholder="请输入昵称" />
            </div>
            <el-button type="primary" icon="el-icon-search" circle @click="searchbtn"></el-button>
          </div>
        </el-form-item>
        <div v-show="info">
           <el-form-item label="用户基本信息：">
             <div style="display: flex;align-items: center;justify-content: flex-start;font-size:12px">
               <div style="width:60px;text-align:right;margin-right:20px">UID</div>
               <div>{{info.uid}}</div>
             </div>
             <div style="display: flex;align-items: center;justify-content: flex-start;">
               <div style="width:60px;text-align:right;margin-right:20px">用户名称</div>
               <div>{{info.username}}</div>
             </div>
             <div style="display: flex;align-items: center;justify-content: flex-start;">
               <div style="width:60px;text-align:right;margin-right:20px">电话号码</div>
               <div>{{info.phone}}</div>
             </div>
           </el-form-item>
           <el-form-item label="活动：" prop="aid">
            <el-select v-model="formData.aid" filterable>
              <el-option label="请选择" value="" />
              <el-option v-for="item in aidArr" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <div v-show="info" slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submitHandler">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 二维码添加 -->
    <el-dialog title="二维码添加" :visible.sync="codeFormVisible" label-width="120px" width="600px">
      <!--  :rules="rules" -->
      <el-form ref="form" :model="codeform">
       <el-form-item label="活动" label-width="120px">
        <el-select v-model="codeform.aid" filterable @change="codebtn">
          <el-option label="请选择活动" value="" />
          <el-option v-for="item in aidArr" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </el-form-item>
      <!-- <div style="color:blue" v-if="codeform.url === ''" @click="codebtn">点击生成二维码</div> -->
      <el-form-item label="二维码" label-width="120px">
        <el-image  class="logimg" :src="codeform.code" :preview-src-list="[codeform.code]" ></el-image>
        <div style="color:#ccc;font-size:12px;text-align:center;width:160px">请用app扫描</div>
      </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="codeFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </el-card>
  </d2-container>
</template>

<script>
import { crudOptions } from './crud' // 上文的crudOptions配置
import { d2CrudPlus } from '@/components/d2-crud-plus'
import { GetList, stateCarouselList, adddata, codedata } from '@/api/quotedsh' // 查询添加修改删除的http请求接口
export default {
  name: 'page2',
  mixins: [d2CrudPlus.crud], // 最核心部分，继承d2CrudPlus.crud
  data () {
    return {
      form: {
        resource: '1'
      },
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      dialogFormVisible: false,
      dialogVisible: false,
      codeFormVisible: false,
      dialogFormTitle: '',
      fromlist:{
        uid: '',
        username: '',
        phone: '',
      },
      formData: {
        type: '',
        uid: '',
        username: '',
        phone: '',
        aid: ''
      },
      codeform: {
        aid: '',
        url: '',
        code: ''
      },
      days: [],
      bankList: [],
      tableLoading: false,
      submitLoading: false,
      aidArr: [],
      types: 0,
      info: '',
      rules: {
        aid: [
          { required: true, message: '请选择活动', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    getCrudOptions () {
      return crudOptions
    },
    doRefresh () {
      this._getTableData()
    }, // 数据请求
    _getTableData () {
      const { pagination } = this
      this.tableLoading = true
      GetList(pagination.currentPage).then(res => {
        const { list = [], pagination, aidArr } = res || {}
        this.tableData = list
        pagination && (this.pagination = pagination)
        aidArr && (this.aidArr = aidArr)
      }).finally(() => {
        this.tableLoading = false
      })
    },
    changeHandler (current) {
      this.pagination.currentPage = current
      this._getTableData()
    },
    // queryHandler () {
    //   this.pagination.currentPage = 1
    //   this._getTableData()
    // },
    resetForm () {
      delete this.formData.id
      this.$refs.form.resetFields()
    },
    // 添加方式确定
    surebtn () {
      if (this.form.resource === '1') {
        this.types = 0
        this.info = ''
        this.formData.uid = ''
        this.formData.phone = ''
        this.formData.username = ''
        this.formData.aid = ''
        this.dialogVisible = false
        this.dialogFormTitle = '新增'
        this.dialogFormVisible = true
      } else {
        this.codeform.aid = ''
        this.codeform.code = ''
        this.dialogVisible = false
        this.codeFormVisible = true
      }
    },
    addHandler () {
      this.form.resource = '1'
      this.dialogVisible = true
      this.fromlist.uid = ''
      this.fromlist.phone = ''
      this.fromlist.username = ''
      this.$nextTick(() => {
        this.resetForm()
      })
    },
    submitHandler () {
      this.$refs.form.validate((valid) => {
        valid && this._setCarouselList()
      })
    },
    toggleHandler (row) {
      const data = Object.assign({}, row)
      data.state = Math.pow(0, row.state)
      this.formData = data
      this._stateCarouselList()
    },
    _setCarouselList () {
      const { formData } = this
      formData.type = 1
      this.submitLoading = true
      adddata({ ...formData }).then(res => {
        this._getTableData()
        this.dialogFormVisible = false
      }).finally(() => {
        this.submitLoading = false
      })
    },
    _stateCarouselList () {
      const { formData } = this
      this.submitLoading = true
      stateCarouselList({ ...formData }).then(res => {
        this.dialogFormVisible = false
        this._getTableData()
      }).finally(() => {
        this.submitLoading = false
      })
    },
    getBackName ({ aid }) {
      return this.aidArr.find(item => item.id === aid).title
    },
    codebtn (val) {
      const { codeform } = this
      const { aid } = codeform
      if (val === '') {
        this.codeform.code = ''
      } else {
        this.submitLoading = true
        codedata(aid).then(res => {
          this.codeform.code = res.code
          this.codeform.url = res.url
        }).finally(() => {
          this.submitLoading = false
        })
      }
    },
    searchbtn () {
      this.info = ''
      const { types, formData, fromlist } = this
      const datalist = {
        type: 0,
        uid: fromlist.uid,
        phone: fromlist.phone,
        username: fromlist.username
      }
      formData.uid = fromlist.uid
      formData.phone = fromlist.phone
      formData.username = fromlist.username
      // types == 0 ? datalist.uid = formData.uid : datalist.phone = formData.phone
      adddata({...datalist}).then(res => {
        this.info = res
      }).finally(() => {
        this.tableLoading = false
      })
    },
    chagese (val) {
      const { fromlist } = this
      fromlist.phone = ''
      fromlist.username = ''
      fromlist.uid = ''
      this.info = ''
    }
  }
}
</script>
<style>
.logimg{
  width: 160px;
  height: 160px;
  background-size: cover;
}

</style>
